<template>
  <v-container
    fill-height
    fluid
    grid-list-xl
  >
    <v-layout justify-center wrap>
      <v-flex>
        <material-card
          color="green">
          <v-form>
            <v-container py-0>
              <v-layout wrap>
                <!-- 币种 -->
                <v-flex xs12 sm6 md4 lg2 d-flex >
                    <v-select
                      v-model="symbolActive"
                      :items="symbol"
                      label="币种"
                      @change="changeSymbol"
                    ></v-select>
                </v-flex>
                <!-- 合约类型 -->
                <v-flex xs12 sm6 md4 lg2 d-flex >
                    <v-select
                      v-model="contractTypeActive"
                      :items="contractType"
                      label="合约类型"
                    ></v-select>
                </v-flex>
                <!-- 时间周期 -->
                <v-flex xs12 sm6 md4 lg2 d-flex >
                    <v-select
                      v-model="periodActive"
                      :items="period"
                      :item-text="period.text"
                      :item-value="period.value"
                      label="时间周期"
                    ></v-select>
                </v-flex>
                <!-- 长期均线 -->
                <v-flex xs12 sm6 md4 lg2 d-flex >
                  <v-text-field label="长期均线" v-model="upMaNum"></v-text-field>
                </v-flex>
                <!-- 短期均线 -->
                <v-flex xs12 sm6 md4 lg2 d-flex >
                  <v-text-field label="短期均线" v-model="downMaNum"></v-text-field>
                </v-flex>
                <!-- 上涨因子 -->
                <v-flex xs12 sm6 md4 lg2 d-flex >
                  <v-text-field label="上涨因子" v-model="upperLeadFactor"></v-text-field>
                </v-flex>
                <!-- 涨幅因子 -->
                <v-flex xs12 sm6 md4 lg2 d-flex >
                  <v-text-field label="涨幅因子" v-model="gainFactor"></v-text-field>
                </v-flex>
                <!-- 购买方式 -->
                <v-flex xs12 sm6 md4 lg2 d-flex >
                    <v-select
                      v-model="buyTypeActive"
                      :items="buyType"
                      label="购买方式"
                    ></v-select>
                </v-flex>
                <!-- 保护因子 -->
                <v-flex xs12 sm6 md4 lg2 d-flex >
                  <v-text-field label="保护因子" v-model="protectionDownFactor"></v-text-field>
                </v-flex>
                <!-- 查询按钮 -->
                <v-flex xs12 sm3 md2 lg1 d-flex >
                   <v-btn small
                    :loading="btnLoading"
                    :disabled="btnLoading"
                    color="info"
                    class="inquire-btn"
                    @click="inquire"
                  >
                    查 询
                    <v-icon right dark></v-icon>
                  </v-btn>
                   <!-- <v-btn color="info" small>查 询</v-btn> -->
                </v-flex>

              </v-layout>
            </v-container>
          </v-form>
        </material-card>
      </v-flex>
  	
    	<!--数据表格-->
			<v-flex
        md12
        lg12
      >
        <material-card
          color="orange"
          :title="inCome"
          :text="sumNum"
        >
          <v-data-table
            :headers="headers"
            :items="items"
            hide-actions
          >
            <template
              slot="headerCell"
              slot-scope="{ header }"
            >
              <span
                class="font-weight-light text-warning text--darken-3"
                v-text="header.text"
              />
            </template>
            <template
              slot="items"
              slot-scope="{ index, item }"
            >
              <td>{{ item.date }}</td>
              <td>{{ item.open }}</td>
              <td>{{ item.high }}</td>
              <td>{{ item.low }}</td>
              <td>{{ item.close }}</td>
              <td>{{ item.gain }}</td>
              <td>{{ item.volume }}</td>
              <td>{{ item.buySellStatus }}</td>
              <td>{{ item.incomeRate }}</td>
            </template>
          </v-data-table>
        </material-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { twoMaStrategy } from '@/api/demoAddress'

export default {
  data () {
    return {
      // 币种
      symbolActive:'BTC',
      symbol:['BTC','EOS'],
      // 合约类型
      contractTypeActive:'quarter',
      contractType:['quarter'],
      // 时间周期 
      periodActive:'15min',
      period: [{
      	text: '15分钟',
      	value: '15min'
      }],
      // 长期均线
      upMaNum:4,
      // 短期均线
      downMaNum:4,
      // 上涨因子
      upperLeadFactor:2,
      // 涨幅因子 
      gainFactor:0.0043,
      // 购买方式：0-等额，1-复利
      buyTypeActive:'等额',
      buyType:['等额','复利'],
      // 保护因子
      protectionDownFactor:0.005,
      // 按钮 - 加载
      btnLoading: true,
      // 总收益
      inCome: '',
      // 买卖次数
      sumNum: '',
      // 表格头部label
      headers: [
        {
          sortable: false,
          text: '时间',
          value: 'date'
        },
        {
          sortable: false,
          text: '开盘',
          value: 'open',
        },
        {
          sortable: false,
          text: '最高点',
          value: 'high',
        },
        {
          sortable: false,
          text: '最低点',
          value: 'low',
        },
        {
          sortable: false,
          text: '收盘',
          value: 'close',
        },
        {
          sortable: false,
          text: '涨跌幅',
          value: 'gain',
        },
        {
          sortable: false,
          text: '成交量',
          value: 'volume'
        },
        {
          sortable: false,
          text: '买卖状态',
          value: 'buySellStatus',
        },
        {
          sortable: false,
          text: '收益率',
          value: 'incomeRate',
        },
      ],
      // 表格数据
      items: [],
    }
  },
  mounted(){
    this.inquire()
  },
  methods: {
    inquire(){
    	this.btnLoading = true;
    	
    	let buyType = this.buyTypeActive === '等额'?0:1;
    	
	    twoMaStrategy(
	    	'symbol=' + this.symbolActive +
        '&contractType=' + this.contractTypeActive +
        '&period=' + this.periodActive +
        '&upMaNum=' + this.upMaNum +
        '&downMaNum=' + this.downMaNum +
        '&upperLeadFactor=' + this.upperLeadFactor +
        '&gainFactor=' + this.gainFactor +
        '&buyType=' + buyType +
        '&protectionDownFactor=' + this.protectionDownFactor
	  	).then( res =>{
	    	this.items = res.data.data.detail;
	    	this.inCome = res.data.data.income==0?'':'总收益 : ' + (res.data.data.income).toFixed(4) + '%';
	    	this.sumNum = res.data.data.sumNum==0?'':'买卖次数 : ' + res.data.data.sumNum;
	    	this.items.forEach(item=>{
	    		// 开盘
	    		item.open = item.open.toFixed(4);
	    		// 最高点
	    		item.high = item.high.toFixed(4);
	    		// 最低点
	    		item.low = item.low.toFixed(4);
	    		// 收盘
	    		item.close = item.close.toFixed(4);
	    		// 涨跌幅
	    		item.gain = (item.gain * 100).toFixed(4) + '%';
	    		// 收益率
	    		item.incomeRate = item.incomeRate==0?'':(item.incomeRate * 100).toFixed(4) + '%';
	    		
	    		// 买卖状态
	    		switch(item.buySellStatus){
	    			case 'buy':
	    				item.buySellStatus = '买入';
	    				break;
	    			case 'sell':
	    				item.buySellStatus = '卖出';
	    				break;
	    		};
	    	});
	      this.btnLoading = false
	    }).catch(e=>{
	      this.btnLoading = false
	    })
    },
    //监听币种下拉框
    changeSymbol(symbolActive){
    	switch (symbolActive){
    		case 'BTC':
    			this.upMaNum = 4;
    			this.downMaNum = 4;
    			this.upperLeadFactor = 2;
    			this.gainFactor = 0.0043;
    			this.protectionDownFactor = 0.005;
    			break;
    		case 'EOS':
    			this.upMaNum = 30;
    			this.downMaNum = 6;
    			this.upperLeadFactor = 1.5;
    			this.gainFactor = -0.008;
    			this.protectionDownFactor = 0.017;
    			break;
    	}
    },
  }
}
</script>
